@import "../../base/fn";
.kdui-search-bar {
  position: relative;
  padding: .2rem .3rem;
  display: flex;
  height: 1rem;
  &.kdui-search-bar_focusing {
    .kdui-search-bar__cancel-btn {
      display: block;
    }
    .kdui-search-bar__label {
      display: none;
    }
    .kdui-search-bar__input {
      display: block;
    }
  }
}

.kdui-search-bar__form {
  position: relative;
  flex: auto;
  background-color: #FFFFFF;
  height: .6rem;
  border-radius: .3rem;
}

.kdui-search-bar__box {
  position: relative;
  padding-left: .68rem;
  padding-right: .6rem;
  height: 100%;
  width: 100%;
  z-index: 1;
  .kdui-search-bar__input {
    width: 100%;
    padding:.1rem 0;
    height: .6rem;
    border: 0;
    font-size: @kduiFontPrimarySize;
    line-height: .4rem;
    background: transparent;
    &:focus {
      outline: none;
    }
  }
  .kdui-icon-search {
    position: absolute;
    left: .2rem;
    top: .14rem;
    line-height: .6rem;
    font-size: @kduiFontHighLightSize;
  }
}

.kdui-search-bar__label {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  text-align: center;
  border-radius: .3rem;
  background: #FFFFFF;
  height: .6rem;
  line-height: .6rem;
  font-size: @kduiFontSecondarySize;
  span {
    color: @kduiFontSupplementColor;
    display: inline-block;
  }
  .kdui-icon-search {
    margin-right: .2rem;
    display: inline-block;
    font-size: @kduiFontPrimarySize;
  }
}

.kdui-search-bar__cancel-btn {
  display: none;
  margin-left: .2rem;
  line-height: .6rem;
  color: @kduiColorPrimary;
  white-space: nowrap;
}

.kdui-search-bar__input {
  display: none;
}

//干掉input[search]默认的clear button
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  display: none;
}
input[type="search"]{
    -webkit-appearance: none;
}

.kdui-search-bar_with-select__box{
  display:flex;
  padding:0 .25rem;
  line-height:.6rem;
  font-size:@kduiFontSecondarySize;
  .kdui-search-bar_with-select__hd{
    color:@kduiFontSecondaryColor;
    .kdui-icon__arrow_down{
      transform:rotate(135deg) translate(.02rem,-.02rem);
      width: 0;
      height: 0;
      border-top: .1rem solid @kduiArrowColor;
      border-left: .1rem solid transparent;
      margin:0;
    }
    label{
      max-width:1.7rem
    }
  }
  .kdui-search-bar_with-select__bd{
    flex: 1 0 auto;
    .kdui-search-bar__input{
      padding-left:.1rem;
    }
    .kdui-search-bar__input::-webkit-input-placeholder{
      font-size:@kduiFontSecondarySize!important;
    }
  }
}
